import React, {Component} from 'react';
import {TouchableOpacity, Text, StyleSheet, View} from "react-native";

import {Button} from 'react-native-elements';

// 第三方渐变按钮
import LinearGradient from 'react-native-linear-gradient';

import {pxToDp} from "../utils/styleKits";

// 自定义渐变按钮按钮
class ThButton extends Component {
  // 接收父组件传值
  static defaultProps = {
    style: {},  // touch样式
    linearStyle: {},  // linear样式
    textStyle: {},   // 文字样式
    disabled: false,   // 是否禁用按钮
    startColor: '#5e47cd',
    endColor: '#e07c7e',
    children: '按钮',
    icon: null,
  };

  render() {
    return (
      <TouchableOpacity onPress={this.props.onPress} style={{...styles.touch, ...this.props.style}}
                        disabled={this.props.disabled}>
        <LinearGradient colors={[this.props.startColor, this.props.endColor]} start={{x: 0, y: 0}} end={{x: 1, y: 0}}
                        style={{ ...styles.linear, ...this.props.linearStyle}}>
          <View style={styles.childBox}>
            {this.props.icon}
            <Text style={{...styles.text, ...this.props.textStyle}}>{this.props.children}</Text>
          </View>
        </LinearGradient>
      </TouchableOpacity>
    )
  }
}

const styles = StyleSheet.create({
  touch: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  childBox: {
    flexDirection:'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  linear: {
    height: pxToDp(40),
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#fff'
  }
});

export default ThButton;